<template>
  <div>
    <!-- 管理员管理 -->

    <!-- 面包屑导航 -->
    <Crumbs></Crumbs>

    <!-- 组件切换 -->
    <div class="store_list">
      <div class="switchBtn">
        <button @click="storeListBtn1" class="storeListBtn" >管理员列表</button>
        <button @click="storeListBtn2">添加管理员</button>
      </div>
      
      <div class="storeAddList">
        <div>
         <el-table
        :data="tableData"
        border
        style="width: 100%"
        >
        <el-table-column
        fixed
        prop="username"
        label="使用人名称"
        width="150">
        </el-table-column>
        <el-table-column
        prop="login"
        label="登录账号"
        width="150">
        </el-table-column>
        <el-table-column
        prop="pwd"
        label="登录密码"
        width="150">
        </el-table-column>
        <el-table-column
        prop="shoplocation"
        label="所属门店"
        width="150">
        </el-table-column>
        <el-table-column
        prop="role"
        label="权限角色"
        width="150">
        </el-table-column>

        <el-table-column
        label="状态"
        width="200"
        >
        <template slot-scope="scope">
          <!-- <h1>{{scope.row.state}}</h1> -->
            <el-radio v-model="scope.row.state" label="1">启用</el-radio>
            <el-radio v-model="scope.row.state" label="2">禁用</el-radio>
        </template>

        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRouter(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deletebtn(scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
  </div>
    </div>
      
    </div>

  </div>
</template>

<script>
import { getXAdminAdmin, getXdeleteAdminAdmin } from "../../api";
import Crumbs from './Crumbs.vue'

export default{
    components: { Crumbs },
    data(){
      return {
        tableData: [],
        form:{
          resource: ''
        },
            //当前选择的行的id
          templateSelection: "",
          //当前选择的行的数据
          checkList: [],
      }
    },
    methods:{
      storeListBtn1(){
        this.$router.push('/adminAdmin')
      },
      storeListBtn2(){
        this.$router.push('/addAdmin')
      },
      singleElection(row) {
      this.templateSelection = row.id
      this.checkList = this.tableData.filter((item) => item.id === row.id)
      console.log(`该行的编号为${row.id}`)
    },

      //编辑管理员
      editRouter(row){
        // console.log(row);
        this.$router.push({
          path:'/editAdmin',
          name:"editAdmin",
          params:{
            list:row
          }
        })
        // console.log(this);
      },
      //删除管理员
      deletebtn(row) {
        // console.log(row.id);
        getXdeleteAdminAdmin({
          id:row.id
        }).then(res=>{
          getXAdminAdmin().then(res=>{
            this.tableData=res.data
          })
        })
      }
    },
    created(){
      //获取数据
      getXAdminAdmin().then(res=>{
        // console.log(res)
       this.tableData=res.data
      //  console.log(this.tableData)
      })
    }
}
</script>

<style lang="scss" scoped>
  .store_list{
    width: 1200px;
    margin: 0 auto ;
    .switchBtn button{
      width: 100px;
      height: 30px;
      border: none;
      margin: 10px 30px 30px 0px;
      border-radius: 10px;
      
    }
    .storeListBtn{
      background: rgb(220,183,63); color: white;
    }
    .el-table th.el-table__cell {
      background: lightgray;
  }
  }
  
</style>

